<script setup lang='ts'>
  import { nextTick, reactive, ref } from 'vue';
  import { luckDrawApi } from '@/api/controller';
  import { ToastSuccess, ToastWarning, Toastloading } from '@/utils/public';
  import JackpotForm from './JackpotForm.vue';
import { ElMessageBox } from 'element-plus';
  const formLabelWidth = '120px'
  const JackpotFormRef = ref()
  const $emit = defineEmits(['submit'])
  const action = reactive({
    dialogFormVisible:false,
    disabled:false,
    title:'',
    nowIndex:-1,
    tableDataTwo:[] as Array<any>,
    activityArr:[] as Array<any>,
  })
  let tableDataThree = [] as Array<any>
  // 礼物类型
  const typeData = [
    { name: "礼物", type: 1 },
    { name: "商品", type: 2 },
    { name: "金豆", type: 3 },
    { name: "道具", type: 4 },
    { name: "礼物碎片", type: 1000 }
  ]
  const getType = (type:number)=>{
    const { name } =  typeData.find(res=>res.type == type) || {name:''}
    return name;
  }
  const formSubmit = (index:number = -1 , form:any = {})=>{
    if(index > -1) {
      action.tableDataTwo[index] = form
      action.tableDataTwo[index].old_data = tableDataThree[index];
    } else {
      action.tableDataTwo.push(form)
    }
  }
  const handleSubmit = ()=>{
    closeDialog()
    $emit('submit',{
      nowIndex:action.nowIndex,
      tableDataTwo:action.tableDataTwo
    })
  }
  const handleForm = (scoped:any = {})=>{
    const { row, $index:index } = scoped
    JackpotFormRef.value.openDialog({
      ...row,
      index
    })
  }
  const handleDel = (scoped:any = {})=>{
    const { $index=-1 } = scoped
    if($index == - 1) return ToastWarning('index -1')
    ElMessageBox.confirm('确定删除此礼物池礼物吗？', '提示',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }).then(() => {
      action.tableDataTwo.splice($index, 1);
    }).catch(() => { })
  }
  const openDialog = async(query:any = {})=> {
    const { id=0, desc='', pool=[], nowIndex } = query
    action.nowIndex = nowIndex
    action.title = `${id?'编辑':'新增'}：${desc}礼物池`
    action.dialogFormVisible = true
    action.tableDataTwo = pool || []
    tableDataThree = JSON.parse(JSON.stringify(pool || []))
  }
  const closeDialog = ()=>{
    action.dialogFormVisible = false
  }
  defineExpose({
    openDialog
  })
</script>

<template>
  <div>
    <el-dialog
      top="5vh"
      class="xm-dialog input-width"
      v-model="action.dialogFormVisible"
      :close-on-click-modal="action.disabled"
      :show-close="action.disabled"
      :close-on-press-escape="action.disabled"
      width="70%"
      :title="action.title">
      <div class="xm-headTab">
        <div class="labelBox">
          <div class="labelItem">
            <el-button type="primary" @click="handleForm()">新增礼物</el-button>
          </div>
        </div>
      </div>
      <el-table
        class="xm-main xm-TableCenter"
        :data="action.tableDataTwo"
        border
      >
      <el-table-column prop="id" label="礼物ID" width="100" />
      <el-table-column prop="name" label="礼物名称" min-width="200" />
      <el-table-column prop="price" label="礼物价格" width="100" />
      <el-table-column prop="num" label="礼物数量" width="120" />
      <el-table-column prop="type" label="礼物类型" width="120">
        <template #default="scoped">
          <el-tag>{{ getType(scoped.row.type) }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="time" label="时间限制(秒)" width="120" />
        <el-table-column label="操作" fixed="right" width="180">
            <template #default="scoped">
              <el-button type="primary" @click="handleForm(scoped)">编辑</el-button>
              <el-button type="danger" @click="handleDel(scoped)">删除</el-button>
            </template>
          </el-table-column>
      </el-table>
      <template v-if="!action.disabled" #footer>
        <span class="dialog-footer">
          <el-button @click="closeDialog">取 消</el-button>
          <el-button type="primary" @click="handleSubmit">确 定</el-button>
        </span>
      </template>
    </el-dialog>
    <JackpotForm ref="JackpotFormRef" @submit="formSubmit" />
  </div>
</template>
